<template>
	<template v-if="pageParams.list && pageParams.list.length != 0">
		<view class="b-left-money" v-for="item in pageParams.list" :key="item">
			<!-- 图片如何判断  -->
			<template v-if="item.redeemStatus == 2">
				<image class="writeOff" src="/static/lh/equity/writeOff.png" style="width: 80rpx" mode="widthFix">
				</image>
			</template>
			<template v-if="item.equityType == 1 || item.equityType == 2">
				<template v-if="item.receiveStatus == 1">
					<image src="/static/lh/equity/good.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix">
					</image>
				</template>
				<template v-if="item.receiveStatus == 2">
					<image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix">
					</image>
				</template>
				<template v-if="item.receiveStatus == 3">
					<image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix">
					</image>
				</template>
				<template v-if="item.receiveStatus == 4">
					<image src="/static/lh/equity/good.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix">
					</image>
				</template>
			</template>
			<template v-if="item.equityType == 4">
				<template v-if="item.receiveStatus == 1">
					<image src="/static/lh/equity/oilBg.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix">
					</image>
				</template>
				<template v-if="item.receiveStatus == 2">
					<image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix">
					</image>
				</template>
				<template v-if="item.receiveStatus == 3">
					<image src="/static/lh/equity/bad.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix">
					</image>
				</template>
				<template v-if="item.receiveStatus == 4">
					<image src="/static/lh/equity/oilBg.png" style="width: 700rpx; margin-left: 25rpx" mode="widthFix">
					</image>
				</template>
			</template>


			<view class="money-content">
				<!-- 四种产品 需要判断 1 立减金 2 虚拟会员 3 停车券 4 加油卷 -->
				<view class="content-left">
					<template v-if="item.equityType == 1">
						<text class="icon">￥</text>
						<text class="num">5</text>
					</template>
					<template v-if="item.equityType == 2">
						<text class="video">视频会员</text>
					</template>
					<template v-if="item.equityType == 4">
						<view class="oil">
							<image src="/static/lh/equity/tuanOil.png" style="width: 100rpx; " mode="widthFix"></image>
						</view>
					</template>
				</view>

				<view class="content-detail">
					<view class="detail-name">{{ item.equityName ? item.equityName : item.portfolioName }}</view>
					<view v-if="item.equityType!=4" class="detail-time">
						有效期{{ item.effectiveTime }}-{{ item.expireTime }}</view>
					<!-- receiveValue 加油券 特殊处理 -->
					<template v-if="item.equityType==4 && item.receiveStatus == 3">
						<view class="oilConpons">
							<up-copy :content="item.receiveValue">
								<text>券码：{{item.receiveValue}}</text>
							</up-copy>

						</view>
					</template>

				</view>
				<!-- receiveStatus 领取状态 1 && 当前时间在有效时间范围内 未领取 有操作  -->
				<!-- receiveStatus 领取状态 1 && 当前时间小于生效时间 未到时间  无操作-->
				<!-- receiveStatus 领取状态 1 && 当前时间大于过期时间   已过期 无操作-->

				<!-- receiveStatus 领取状态 2 &&   领取中 无操作-->
				<!-- receiveStatus 领取状态 3 &&   领取成功 无操作-->
				<!-- receiveStatus 领取状态 4 &&   领取失败 -->
				<view class="right-btn">

					<template v-if="item.equityType==4">
						<view style="height: 80rpx;" v-if="item.receiveStatus != 1"></view>
						<view class="content-btn1" v-if="item.receiveStatus == 1">
							<button @click="getTiket(item)">未领取</button>
						</view>

						<view v-else-if="item.receiveStatus == 2" class="content-load">{{ status[item.receiveStatus] }}
						</view>
						<view v-else-if="item.receiveStatus == 3" class="content-success">
							<up-copy :content="item.receiveValue">
								<text style="color: blue;">点击复制</text>
							</up-copy>
						</view>
						<view v-else-if="item.receiveStatus == 4" class="content-error">
							<button @click="getTiket(item)">
								{{ status[item.receiveStatus] }}
							</button>
						</view>
					</template>
					<template v-if="item.equityType!=4">
						<view class="number">{{ parseInt(item.annualPayNum) }} 期</view>
						<view class="content-btn" v-if="item.receiveStatus == 1">
							<template v-if="haveOperate(item) == '未领取'">
								<button @click="getTiket(item)">{{ haveOperate(item) }}</button>
							</template>
							<template v-else>
								{{ haveOperate(item) }}
							</template>
						</view>
						<view v-else-if="item.receiveStatus == 2" class="content-load">{{ status[item.receiveStatus] }}
						</view>
						<view v-else-if="item.receiveStatus == 3" class="content-success">
							{{ status[item.receiveStatus] }}
						</view>
						<view v-else-if="item.receiveStatus == 4" class="content-error">
							<button @click="getTiket(item)">
								{{ status[item.receiveStatus] }}
							</button>
						</view>
					</template>

				</view>
			</view>
		</view>
	</template>
	<template v-else>
		<up-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png"></up-empty>
	</template>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {
		customDebounce
	} from '@/utils/commo.js';
	const status = ['', '未领取', '领取中', '领取成功', '领取失败'];
	const emit = defineEmits(['getTiket']);
	const props = defineProps({
		pageParams: {
			type: Object,
			default: () => {}
		}
	});
	const getTiket = customDebounce((item) => {
		emit('getTiket', item);
	}, 1000)
	const haveOperate = (item) => {
		/* receiveStatus 领取状态 1 && 当前时间在有效时间范围内 未领取 有操作  
		   receiveStatus 领取状态 1 && 当前时间 早于 生效时间 未到时间  无操作 effectiveTime
		   receiveStatus 领取状态 1 && 当前时间大于过期时间   已过期 无操作 expireTime
		*/

		const time1 = item.effectiveTime; // 8yue
		const time2 = item.expireTime; // 9yue
		const nowTime = dayjs(new Date()).format('YYYY-MM-DD HH:ss:mm');
		const dayjsTime1 = dayjs(time1);
		const dayjsTime2 = dayjs(time2);
		const dayjsTime3 = dayjs(nowTime);
		if (dayjsTime3.isBefore(dayjsTime1)) {
			return '未到时间';
		} else if (dayjsTime3.isAfter(dayjsTime2)) {
			return '已过期';
		} else if (dayjsTime3.isAfter(dayjsTime1) && dayjsTime3.isBefore(dayjsTime2)) {
			return '未领取';
		} else {
			return '错误时间';
		}
	};
</script>

<style lang="scss" scoped>
	.b-left-money {
		position: relative;
		margin-top: 10rpx;

		.writeOff {
			position: absolute;
			left: 35rpx;
			z-index: 100;
			top: 20rpx;
		}

		.money-content {
			.right-btn {
				width: 200rpx;

				.number {
					text-align: center;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}

				.content-btn1 {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					height: 146rpx;
					button {
						font-size: 20rpx;
						background-color: #6082ce;
						border-radius: 100rpx;
						color: #fff;
					}
				}

				.content-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;

					button {
						font-size: 20rpx;
						background-color: #6082ce;
						border-radius: 100rpx;
						color: #fff;
					}
				}

				.content-load {
					color: #71d5a1;
					font-size: 20rpx;
					width: 200rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.content-success {
					color: #19be6b;
					font-size: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.content-error {
					color: #dd6161;
					display: flex;
					justify-content: center;
					align-items: center;

					button {
						font-size: 20rpx;
						border-radius: 100rpx;
						background-color: #6082ce;
						border-radius: 100rpx;
					}
				}
			}

			.content-left {
				width: 210rpx;
				text-align: center;
				line-height: 146rpx;

				.oil {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 146rpx;
				}

				.icon {
					color: #fff;
				}

				.num {
					font-size: 70rpx;
					color: #fff;
					font-weight: 600;
				}

				.video {
					font-size: 30rpx;
					color: #fff;
					font-weight: 600;
				}
			}

			.content-detail {
				width: 350rpx;
				font-size: 20rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.oilConpons {
					font-size: 22rpx;
					font-weight: 600;
					display: flex;
				}

				.detail-name {
					font-size: 22rpx;
					font-weight: 600;
				}

				.detail-time {
					font-size: 12rpx;
				}

				view {
					line-height: 40rpx;
				}
			}

			position: absolute;
			top: 0;
			width: 700rpx;
			height: 146rpx;
			left: 25rpx;
			display: flex;
		}
	}
</style>